<template>
    <a-input v-if="!props.readonly" class="w-full" v-model:value="state.value" @change="inputVal" :placeholder="props.placeholder" :allowClear="props.allowClear"></a-input>
    <a-textarea v-else :value="state.value" placeholder="-" auto-size />
</template>
<script setup>
const emits = defineEmits(["change", "update:value"]);
const props = defineProps({
    value: undefined,
    allowClear: {
        type: Boolean,
        default: true,
    },
    placeholder: {
        type: String,
        default: "",
    },
    readonly: {
        type: Boolean,
        default: false,
    },
});
const state = reactive({
    value: undefined,
});
const inputVal = () => {
    emits("update:value", state.value);
    emits("change", state.value);
};
watch(
    () => props.value,
    (newVal, oldVal) => {
        state.value = newVal;
    },
    { deep: false, immediate: true }
);
defineExpose({});
const {} = toRefs(state);
</script>
<style scoped>
.css-dev-only-do-not-override-qutiz1.ant-input-affix-wrapper-disabled,
.css-dev-only-do-not-override-qutiz1.ant-input-affix-wrapper[disabled] {
    background-color: rgba(255, 255, 255, 1);
}
</style>